<template>
	<view class="">

		<!-- <view class="">
			{{userType}}
		</view> -->
		<view class="partner_box"
			v-if="userType == 3 && basicUnserInfo.dealerAuditStatus == 2 && basicUnserInfo.paySetMeal">
			<image :src="ossUrl + '/partner_back.png'" mode="" class="partner_back"></image>
			<view class="content">
				<view class="level_box">
					<view class="level_header">
						<image :src="ossUrl + '/partner_header.png'" mode="" class="header_img"></image>
						<view class="header_content">
							<view class="header_tips" v-if="dataInfo.currentLevel && dataInfo.currentLevel != -1">
								当前等级{{ dataInfo.currentLevel }}
							</view>
							<view class="header_title">
								{{ dataInfo.currentLevel == 1 ? "三星城市合伙人" : dataInfo.currentLevel == 2 ? "四星城市合伙人" :
				dataInfo.currentLevel == 3 ? "五星城市合伙人" : "暂无等级" }}
							</view>
						</view>
					</view>
					<view class="level_content" v-if="dataInfo.currentLevel == -1">
						<view class="text1">
							预估业绩提成
						</view>
						<view class="text2">
							{{ dataInfo.expectedEarnings || 0 }}
						</view>
						<view class="text3" v-if="dataInfo.needNum">
							还差 <text class="number_text">{{ dataInfo.needNum || 0 }}</text>位经销商即可成为城市合伙人获得业绩提成
						</view>
					</view>
					<view class="performance_box" v-else>
						<view class="performance_content">
							<view class="content_single">
								<view class="single_title">
									本月业绩
								</view>
								<view class="single_number">
									{{ dataInfo.monthEarnings || 0 }}
								</view>
							</view>
							<view class="content_single">
								<view class="single_title">
									预估业绩提成
								</view>
								<view class="single_number">
									{{ dataInfo.expectedEarnings || 0 }}
								</view>
							</view>
						</view>
						<view class="performance_text">
							当前权益：获得邀请经销商<text class="performance_number">{{ dataInfo.currentCommission || 0
								}}%</text>的业绩提成
						</view>
					</view>
					<view class="rate_box" v-if="dataInfo.currentLevel != 3">
						<view class="rate_title">
							<view class="title1">
								当前推广进度
							</view>
							<view class="title2" v-if="dataInfo.currentLevel!=-1">
								还需要邀请{{ dataInfo.needNum || 0 }}位
							</view>
						</view>
						<view class="percent_box">
							<view class="percent_number"
								:style="{ 'width': dataInfo.schedule ? dataInfo.schedule + '%' : '0%' }">

							</view>
						</view>
						<view class="rate_title percent_text">
							<view class="title1">
								{{ dataInfo.currentNum || 0 }}/{{ dataInfo.needTotalNum || 0 }}
							</view>
							<view class="title2">
								{{ dataInfo.schedule || 0 }}%
							</view>
						</view>
					</view>
					<view class="invite_btn" @click="iviteUser">
						继续邀请
					</view>
				</view>
				<view class="level_box right_box" v-if="dataInfo.currentLevel != 3">
					<view class="level_header">
						<image :src="ossUrl + '/partner_header.png'" mode="" class="header_img"></image>
						<view class="header_content">
							<view class="header_title">
								{{ dataInfo.currentLevel == 1 ? "四星城市合伙人权益" : dataInfo.currentLevel == 2 ? "五星城市合伙人权益" :
				"合伙人权益" }}
							</view>
						</view>
					</view>
					<view class="right_text" >
						<view class="">
							您还需要邀请<text class="text_number">{{ dataInfo.needNum || 0 }}</text>位
						</view>
						<view class="">
							就能获得邀请经销商<text class="text_number">{{ dataInfo.nextCommission || 0 }}%</text>的业绩提成啦
						</view>

					</view>
				</view>
				<view class="level_box right_box list_box"
					v-if="dataInfo.partnershipListList && dataInfo.partnershipListList.length > 0 &&dataInfo.currentLevel!=-1 ">
					<view class="level_header">
						<image :src="ossUrl + '/partner_header.png'" mode="" class="header_img"></image>
						<view class="header_content">
							<view class="header_title">
								业绩列表
							</view>
						</view>
					</view>
					<template v-for="(item, index) in dataInfo.partnershipListList">
						<view :class="index == 0 ? 'single_list first_list' : 'single_list'" :key="index">
							<view class="list_header">
								<view class="photo_box">
									<image :src="item.shopPhoto?item.shopPhoto:'../../static/images/avatar_empty.png'" mode=""
									class="user_avatar"></image>
								</view>
								<view class="user_name">
									{{ item.dealerName }}
								</view>
							</view>
							<view class="list_content">
								<view class="small_card">
									<view class="card_title">
										本月业绩
									</view>
									<view class="card_text">
										￥{{ item.month ||0}}
									</view>
								</view>
								<view class="small_card">
									<view class="card_title">
										上月业绩
									</view>
									<view class="card_text">
										￥{{ item.previous||0 }}
									</view>
								</view>
								<view class="small_card big_card">
									<view class="card_title">
										历史业绩
									</view>
									<view class="card_text">
										￥{{ item.history ||0}}
									</view>
								</view>
							</view>
						</view>
					</template>
					<!-- 					<view class="single_list first_list">
						<view class="list_header">
							<view class="photo_box">

							</view>
							<view class="user_name">
								顾家成都总代
							</view>
						</view>
						<view class="list_content">
							<view class="small_card">
								<view class="card_title">
									本月业绩
								</view>
								<view class="card_text">
									￥56,254
								</view>
							</view>
							<view class="small_card">
								<view class="card_title">
									本月业绩
								</view>
								<view class="card_text">
									￥56,254
								</view>
							</view>
							<view class="small_card big_card">
								<view class="card_title">
									本月业绩
								</view>
								<view class="card_text">
									￥56,254
								</view>
							</view>
						</view>
					</view> -->
				</view>
			</view>
		</view>
		<view class="nodata_content" v-if="userType != 3 || !token">
			<image :src="ossUrl + '/noparner.png'" mode="" class="width_150 height_150"></image>
			<view class="fc_999 fz_14 mt_12">
				当前无等级
			</view>
		</view>
		<template v-if="userType == 3 && (basicUnserInfo.dealerAuditStatus != 2 || !basicUnserInfo.paySetMeal)">
			<NoPermission :requestCount="requestCount" :ossUrl="ossUrl" :basicUnserInfo="basicUnserInfo" />
		</template>


	</view>
</template>

<script>
import api from "@/service/config/api";
import NoPermission from "@/components/noPermission.vue"
import {
	mapState
} from 'vuex'
export default {
	components: {
		NoPermission
	},
	data() {
		return {
			ossUrl: this.$ossUrl,
			requestCount: 0,
			basicUnserInfo: {},
			level: 4,
			dataInfo: {},
			token: uni.getStorageSync('token')
		}
	},
	onLoad() {
		console.log("合伙人")
		console.log("合伙人2")
	},
	onShow() {

		this.getBasicUserInfo()

		// if (this.basicUnserInfo.dealerAuditStatus == 2 && this.basicUnserInfo.paySetMeal) {
		// 	console.log('合伙人1')
		// 	this.getPartnerInfo()
		// 	console.log("合伙人页面")
		// }

	},
	onHide() {
		// this.requestCount = 0
		// this.basicUnserInfo={}
		// this.level=4
		// this.dataInfo={}
		// this.token = uni.getStorageSync('token')
	},
	computed: {
		...mapState(['userType']),
	},
	methods: {
		// 继续邀请
		iviteUser() {
			uni.navigateTo({
				url: "/pages/common/pages/invite"
			})
		},
		getBasicUserInfo() {
			api.get("/user/api/auth/userInfo").then((res) => {
				console.log("用户信息1");
				console.log(res);
				if (res && res.code == 0) {
					this.requestCount = 1

					const data = res.data
					let userType = data.identityType

					if (data.identityType == 1) {
						if (data.dealer) {

							this.$storage.setItem("userType", 3);
							userType = 3
						} else if (!data.manager && !data.guide && !data.dealer) {

							this.$storage.setItem("userType", 4);
							userType = 4
						} else if (data.manager) {
							this.$storage.setItem("userType", 2);
							userType = 2

						} else if (data.guide) {
							this.$storage.setItem("userType", 1);
							userType = 1

						}

					} else if (data.identityType == 2) {
						this.$storage.setItem("userType", 3);
						userType = 3
					} else {
						this.$storage.setItem("userType", data.identityType + 2);
						userType = data.identityType + 2
					}
					this.$store.commit('setUserType', userType)
					if (data) {
						this.basicUnserInfo = data
						this.$store.commit('setUserInfo', data)
						this.$storage.setItem("basicUnserInfo", data)
					}
					if (this.basicUnserInfo.dealerAuditStatus == 2 && this.basicUnserInfo.paySetMeal) {
						console.log('合伙人1')
						this.getPartnerInfo()
						console.log("合伙人页面")
					}
				}
			});
		},
		//获取合伙人信息
		getPartnerInfo() {
			api.get("/user/api/partnership/mine").then(res => {
				console.log("信息")
				console.log(res)
				if (res && res.code == 0) {
					this.dataInfo = res.data
				}
			})
		}
	}
}
</script>

<style lang="less">
page {
	padding-bottom: 0;
}


.flex(@A, @B, @C, @D) {
	display: flex;
	flex-direction: @A;
	flex-wrap: @B;
	justify-content: @C;
	align-items: @D;
}

.nodata_content {
	margin-top: 256rpx;
	.flex(column, nowrap, center, center);
}

.partner_box {

	.partner_back {
		width: 100%;
		height: 482rpx;
		display: block;
	}

	.content {
		position: absolute;
		width: 100%;
		left: 0;
		top: 446rpx;
		background: linear-gradient(135deg, #FE5A1C 0%, #FE451C 100%);

		.level_box {
			margin: -16rpx auto 0 auto;
			width: 702rpx;
			box-sizing: border-box;
			padding: 64rpx 24rpx 24rpx 24rpx;
			position: relative;
			background: #FF713A;
			box-shadow: 0rpx 8rpx 24rpx 0rpx #D43C15;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;

			.level_header {
				width: 100%;
				position: absolute;
				left: 0;
				top: -48rpx;
				.flex(row, nowrap, center, center);

				.header_img {
					width: 408rpx;
					height: 96rpx;
				}

				.header_content {
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;
					top: 0;
					z-index: 1;
					.flex(column, nowrap, center, center);

					.header_title {
						font-size: 36rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #5F4401;
						line-height: 42rpx;
					}

					.header_tips {
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #5F4401;
						line-height: 28rpx;
					}
				}
			}

			.level_content {
				width: 654rpx;
				background: #FFFFFF;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				opacity: 1;
				background: #fff;
				margin: 24rpx auto;
				box-sizing: border-box;
				// padding: 36rpx 10rpx 26rpx 10rpx;
				text-align: center;

				.text1 {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 28rpx;
					padding-top: 32rpx;
				}

				.text2 {
					font-size: 40rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 47rpx;
					padding: 8rpx 0 16rpx 0;
				}

				.text3 {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 28rpx;
					padding-bottom: 30rpx;
				}

				.number_text {
					color: #FE5A1C;
					padding: 0 10rpx;
				}
			}

			.performance_box {
				width: 654rpx;
				height: 224rpx;
				background: #FFFFFF;
				padding: 30rpx 0;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				margin-bottom: 24rpx;
				box-sizing: border-box;
				.flex(column, norap, space-between, center);

				.performance_content {
					width: 100%;
					// padding: 32rpx 0 0rpx 0;
					.flex(row, nowrap, center, center);

					.content_single {
						width: 50%;
						text-align: center;

						.single_title {
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
							line-height: 28rpx;
						}

						.single_number {
							font-size: 40rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #333333;
							line-height: 47rpx;
							margin-top: 8rpx;
						}
					}
				}

				.performance_text {
					text-align: center;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 28rpx;

					.performance_number {
						color: #FE5A1C
					}
				}
			}

			.rate_box {
				.rate_title {
					.flex(row, nowrap, space-between, center);

					.title1 {
						font-size: 32rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						line-height: 38rpx;
					}

					.title2 {
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #F6F6F6;
						line-height: 28rpx;
					}

				}

				.percent_text {
					font-size: 28rpx !important;
				}

				.percent_box {
					width: 100%;
					height: 24rpx;
					background: rgba(255, 255, 255, 0.57);
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					opacity: 1;
					margin: 24rpx auto 4rpx auto;

					.percent_number {
						// width: 80%;
						height: 24rpx;
						background: #FFFFFF;
						border-radius: 14rpx 14rpx 14rpx 14rpx;
						opacity: 1;
					}
				}
			}

			.invite_btn {
				margin-top: 24rpx;
				width: 654rpx;
				height: 96rpx;
				background: linear-gradient(180deg, #FFC759 0%, #FA9A0A 100%);
				border-radius: 508rpx 508rpx 508rpx 508rpx;
				opacity: 1;
				font-size: 36rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 96rpx;
				text-align: center;
			}
		}

		.list_box {
			height: auto !important;
			box-sizing: border-box;
			padding-top: 72rpx;
			border: 1rpx solid #FF713A;

			.first_list {
				margin-top: 72rpx !important;
			}

			.single_list {
				width: 654rpx;
				height: 384rpx;
				background: #FFFFFF;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				margin: auto;
				opacity: 1;
				margin-bottom: 24rpx;
				overflow: hidden;

				.list_header {
					height: 80rpx;
					background: linear-gradient(93deg, #FFE2D8 0%, rgba(255, 225, 214, 0) 100%);
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					opacity: 1;
					box-sizing: border-box;
					padding: 0 16rpx;
					.flex(row, nowrap, flex-start, center);

					.photo_box {
						width: 56rpx;
						height: 56rpx;
						border-radius: 28rpx;
						margin-right: 16rpx;
						border-radius: 28rpx;
						overflow: hidden;
						.user_avatar{
							width: 100%;
							height: 100%;
						}
					}

					.user_name {
						font-size: 32rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 38rpx;
					}
				}

				.list_content {
					box-sizing: border-box;
					padding: 0 24rpx;
					.flex(row, wrap, space-between, center);

					.small_card {
						width: calc((100% - 14rpx) / 2);
						background: #F5F7FB;
						height: 120rpx;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						opacity: 1;
						margin-top: 24rpx;
						.flex(column, nowrap, center, center);

						.card_title {
							font-size: 24rpx;
							line-height: 28rpx;
							color: #999999;
						}

						.card_text {
							font-size: 36rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #333333;
							margin-top: 8rpx;
						}
					}

					.big_card {
						width: 100% !important;
					}
				}
			}
		}

		.right_box {
			margin: 104rpx auto 100rpx auto;
			padding: 0;
			height: 276rpx;
			margin-top: 104rpx;

			.right_text {
				text-align: center;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 45rpx;
				font-weight: 500;
				width: 100%;
				height: 100%;
				.flex(column, nowrap, center, center);
			}

			.text_number {
				padding: 0 5rpx;
				font-size: 40rpx;
				font-weight: bold;
			}
		}

	}
}
</style>